<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立可得项目</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- 引入index文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入网页小图标 -->
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <!-- 引入jQuery文件 -->
    <script src="./js/jquery-1.12.4.js"></script>
    <!-- 引入echarts文件 -->
    <script src="./js/echarts.min.js"></script>
    <!-- 引入echarts的中国地图文件 -->
    <script src="./js/china.js"></script>
    <!-- 引入自己写的js文件 -->
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="container">
        <!-- 1.第一列 -->
        <div class="column">
            <!-- 1.1 数据概览 -->
            <div class="panel overvoew">
                <div class="inner">
                    <div class="item">
                        <p>2,190</p>
                        <span><i class="icon-dot blue"></i>设备总数</span>
                    </div>
                    <div class="item">
                        <p>190</p>
                        <span><i class="icon-dot turquoise"></i>季度新增</span>
                    </div>
                    <div class="item">
                        <p>3,001</p>
                        <span><i class="icon-dot turquoise"></i>运营设备</span>
                    </div>
                    <div class="item">
                        <p>108</p>
                        <span><i class="icon-dot red"></i>异常设备</span>
                    </div>
                </div>
            </div>
            <!-- 1.2 故障设备监控 -->
            <div class="panel monitor">
                <div class="inner">
                    <!-- 页签 -->
                    <div class="tabs">
                        <a class="active" href="javascript: void(0);">故障设备监控</a>
                        <a href="javascript: void(0);">异常设备监控</a>
                    </div>
                    <!-- 页面一 -->
                    <div class="content">
                        <div class="head">
                            <span>故障时间</span>
                            <span>故障地址</span>
                            <span>故障代码</span>
                        </div>
                        <!-- 页面轮播图 -->
                        <div class="carousel">
                            <ul>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100001</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100002</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100003</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100004</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100005</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100006</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100007</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100008</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100009</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100010</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100011</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100012</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100013</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100014</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100015</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100001</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100002</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100003</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100004</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100005</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100006</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100007</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100008</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100009</span>
                                </li>
                                <li>
                                    <span>20201204</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>100010</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 页面二 -->
                    <div class="content" style="display: none;">
                        <div class="head">
                            <span>异常时间</span>
                            <span>异常地址</span>
                            <span>异常代码</span>
                        </div>
                        <!-- 页面轮播图 -->
                        <div class="carousel">
                            <ul>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210001</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210002</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210003</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210004</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210005</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210006</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210007</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210008</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210009</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210010</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210011</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210012</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210013</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210014</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210015</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210001</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210002</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210003</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210004</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210005</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210006</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210007</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210008</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210009</span>
                                </li>
                                <li>
                                    <span>20201206</span>
                                    <span>传智播客黑马程序员深圳市宝安区石岩街道创维创新谷</span>
                                    <span>210010</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 1.3 点位分布 -->
            <div class="panel point">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="echarts">
                        <div class="pie fl"></div>
                        <div class="data fr">
                            <div class="item">
                                <p>320,11</p>
                                <span><i class="icon-dot red"></i>点位总数</span>
                            </div>
                            <div class="item">
                                <p>418</p>
                                <span><i class="icon-dot yellow"></i>本月新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 2.第二列 -->
        <div class="column">
            <!-- 2.1 设备数据统计 -->
            <div class="map">
                <h3><i class="icon-cube cyan"></i>设备数据统计</h3>
                <div class="echarts">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 2.2 全国用户总量统计 -->
            <div class="panel user">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="echarts">
                        <div class="bar fl"></div>
                        <div class="data fr">
                            <div class="item">
                                <p>120,899</p>
                                <span><i class="icon-dot red"></i>用户总量</span>
                            </div>
                            <div class="item">
                                <p>248</p>
                                <span><i class="icon-dot yellow"></i>本月新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 3.第三列 -->
        <div class="column">
            <!-- 3.1 订单量 -->
            <div class="panel order">
                <div class="inner">
                    <div class="date">
                        <a class="active" href="javascript:void(0);">360天</a>
                        <span></span>
                        <a href="javascript:void(0);">90天</a>
                        <span></span>
                        <a href="javascript:void(0);">30天</a>
                        <span></span>
                        <a href="javascript:void(0);">24小时</a>
                    </div>
                    <!-- 365天 -->
                    <div class="order_count">
                        <div class="item" >
                            <p>20,301</p>
                            <span><i class="icon-dot red"></i>订单量</span>
                        </div>
                        <div class="item">
                            <p>99834</p>
                            <span><i class="icon-dot yellow"></i>销售额(万元)</span>
                        </div>
                    </div>
                    <!-- 90天 -->
                    <div class="order_count" style="display: none;">
                        <div class="item">
                            <p>23,301</p>
                            <span><i class="icon-dot red"></i>订单量</span>
                        </div>
                        <div class="item">
                            <p>9834</p>
                            <span><i class="icon-dot yellow"></i>销售额(万元)</span>
                        </div>
                    </div>
                    <!-- 30天 -->
                    <div class="order_count" style="display: none;">
                        <div class="item">
                            <p>1,987</p>
                            <span><i class="icon-dot red"></i>订单量</span>
                        </div>
                        <div class="item">
                            <p>3834</p>
                            <span><i class="icon-dot yellow"></i>销售额(万元)</span>
                        </div>
                    </div>
                    <!-- 24小时 -->
                    <div class="order_count" style="display: none;">
                        <div class="item">
                            <p>987</p>
                            <span><i class="icon-dot red"></i>订单量</span>
                        </div>
                        <div class="item">
                            <p>834</p>
                            <span><i class="icon-dot yellow"></i>销售额(万元)</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3.2 销售额统计 -->
            <div class="panel sale">
                <div class="inner">
                    <div class="sale_stat">
                        <h3>销售额统计</h3>
                        <a href="javascript:void(0);">年</a>
                        <a href="javascript:void(0);">季</a>
                        <a class="active" href="javascript:void(0);">月</a>
                        <a href="javascript:void(0);">周</a>
                    </div>
                    <div class="echarts">
                        <div class="line_chart"></div>
                    </div>
                </div>
            </div>
            <!-- 3.3 渠道分布/一季度销售进度 -->
            <div class="clearfix ">
                <!-- 左边的 渠道分布 -->
                <div class="panel fl left_channel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="channel">
                            <ul>
                                <li>
                                    <p>39<b>%</b></p>
                                    <span><i class="icon-plane"></i>机场</span>
                                </li>
                                <li>
                                    <p>28<b>%</b></p>
                                    <span><i class="icon-bag"></i>商场</span>
                                </li>
                                <li>
                                    <p>20<b>%</b></p>
                                    <span><i class="icon-train"></i>地铁</span>
                                </li>
                                <li>
                                    <p>13<b>%</b></p>
                                    <span><i class="icon-bus"></i>火车站</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 右边的 一季度销售进度 -->
                <div class="panel fr right_channel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="echarts">
                            <div class="loop"></div>
                            <div class="data">
                                <b>75</b>
                                <small>%</small>
                            </div>
                        </div>
                        <div>
                            <div class="item">
                                <p>1,321</p>
                                <span><i class="icon-dot turquoise"></i>销售额</span>
                            </div>
                            <div class="item">
                                <p>150%</p>
                                <span><i class="icon-dot red"></i>同比增长</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3.4 全国热榜 -->
            <div class="panel hot">
                <div class="inner">
                    <!-- 表头 -->
                    <div class="hot_head">
                        <h3>全国热榜</h3>
                        <h3>各省热销</h3>
                        <h3>//近30日//</h3>
                    </div>
                    <!-- 内容 -->
                    <div class="ranking">
                        <!-- 热榜 第一列 -->
                        <div class="ranking_one">
                            <p><i class="icon-cup1 red"></i>可爱多</p>
                            <p><i class="icon-cup2 turquoise"></i>娃哈哈</p>
                            <p><i class="icon-cup3 blue"></i>喜之郎</p>
                        </div>
                        <!-- 热榜 第二列 -->
                        <div class="ranking_two">
                            <ul>
                                <li>
                                    <span>北京</span>
                                    <span>25,179<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>河北</span>
                                    <span>23,252<i class="icon-down turquoise"></i></span>
                                </li>
                                <li>
                                    <span>上海</span>
                                    <span>20,456<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>江苏</span>
                                    <span>23,234<i class="icon-down turquoise"></i></span>
                                </li>
                                <li class="active">
                                    <span>山东</span>
                                    <span>56,234<i class="icon-up red"></i></span>
                                </li>
                            </ul>
                        </div>
                        <!-- 热榜 第三列 -->
                        <!-- 北京 -->
                        <div class="ranking_three" style="display: none;">
                            <ul>
                                <li>
                                    <span>小洋人</span>
                                    <span>6,724<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>好多鱼</span>
                                    <span>2,170<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>可爱多</span>
                                    <span>9,086<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>娃哈哈</span>
                                    <span>8,341<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>喜之郎</span>
                                    <span>7,407<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span id="bx">八喜</span>
                                    <span>6,080<i class="icon-up red"></i></span>
                                </li>
                            </ul>
                        </div>
                        <!-- 河北 -->
                        <div class="ranking_three" style="display: none;">
                            <ul>
                                <li>
                                    <span>可爱多</span>
                                    <span>9,086<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>娃哈哈</span>
                                    <span>8,341<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>喜之郎</span>
                                    <span>7,407<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span id="bx">八喜</span>
                                    <span>6,080<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>小洋人</span>
                                    <span>6,724<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>好多鱼</span>
                                    <span>2,170<i class="icon-up red"></i></span>
                                </li>
                                
                            </ul>
                        </div>
                        <!-- 上海 -->
                        <div class="ranking_three" style="display: none;">
                            <ul>
                                <li>
                                    <span>娃哈哈</span>
                                    <span>8,341<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>喜之郎</span>
                                    <span>7,407<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span id="bx">八喜</span>
                                    <span>6,080<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>小洋人</span>
                                    <span>6,724<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>好多鱼</span>
                                    <span>2,170<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>可爱多</span>
                                    <span>9,086<i class="icon-up red"></i></span>
                                </li>
                            </ul>
                        </div>
                        <!-- 江苏 -->
                        <div class="ranking_three" style="display: none;">
                            <ul>
                                <li>
                                    <span>娃哈哈</span>
                                    <span>8,341<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>喜之郎</span>
                                    <span>7,407<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span id="bx">八喜</span>
                                    <span>6,080<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>小洋人</span>
                                    <span>6,724<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>好多鱼</span>
                                    <span>2,170<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>可爱多</span>
                                    <span>9,086<i class="icon-up red"></i></span>
                                </li>
                            </ul>
                        </div>
                        <!-- 山东 -->
                        <div class="ranking_three">
                            <ul>
                                <li>
                                    <span>娃哈哈</span>
                                    <span>8,341<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>喜之郎</span>
                                    <span>7,407<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span id="bx">八喜</span>
                                    <span>6,080<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>小洋人</span>
                                    <span>6,724<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>好多鱼</span>
                                    <span>2,170<i class="icon-up red"></i></span>
                                </li>
                                <li>
                                    <span>可爱多</span>
                                    <span>9,086<i class="icon-up red"></i></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>